<template>
	<div class="list">
		<el-row justify="space-between">
			<el-col :span="12">
				<span>用户列表 - 密码重置- 冻结</span>
			</el-col>
			<el-col :span="4">
				<el-button size="small" type="primary" @click="centerDialogVisible=true">
					<el-icon><user-filled /></el-icon>添加管理员
				</el-button>
			</el-col>
			<el-dialog v-model="centerDialogVisible" title="注册" width="30%" center>
					<div>
						<el-input v-model="account" placeholder="请输入账号">
						  <template #prepend>账号</template>
						</el-input>
						<form>
							<el-input v-model="password" placeholder="请输入密码" show-password >
								<template #prepend>密码</template>
							</el-input>
						</form>
						<el-input v-model="nickname" placeholder="请输入昵称" >
						  <template #prepend>昵称</template>
						</el-input>
						<el-input v-model="phone" placeholder="请输入电话">
						  <template #prepend>电话</template>
						</el-input>
					  </div>
			  <template #footer>
			    <span class="dialog-footer">
					<el-button @click="centerDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="getoffest()">确定 </el-button>
			    </span>
			  </template>
			</el-dialog>
		</el-row>
		<div class="list-bottom"></div>
		<div class="selcet_button">
			  <el-radio-group v-model="radio1" size="large">
			       <el-radio-button label="查看全部" @click="select(1)"></el-radio-button>
			       <el-radio-button label="用户" @click="select(2)"></el-radio-button>
			       <el-radio-button label="管理员" @click="select(3)"></el-radio-button>
			       <el-radio-button label="已冻结" @click="select(4)"></el-radio-button>
			 	   <el-radio-button label="已激活" @click="select(5)"></el-radio-button>
			     </el-radio-group>
		</div>
		<el-table
			:data="userlist.slice((this.page - 1) * this.num,this.page * this.num)"
			border style="width: 100% " 
			:default-sort="{ prop: 'id', order: 'ascending' }"
			hide-on-single-page height="620">
		>
				<el-table-column label="头像" width="150">
					<template #default="scope">
						<template v-if="scope.row.img">
							<img :src="`${$Imgurl}/api/public/showImg/${scope.row.img}`" />
						</template>
						<template v-else>
							<img src="../../../../public/img/未登录.png" />
						</template>
					</template>
				</el-table-column>
				<el-table-column prop="nickname" label="用户名"  />
				<el-table-column prop="account" label="账号" />
				<el-table-column prop="id" label="ID" width="90" />
				<el-table-column prop="phone" label="电话"  />
				<el-table-column prop="role" label="用户类型" width="150" />
				<el-table-column label="状态" width="170">
					<template #default="scope">
						<el-button type="success" size="mini">{{filterClosed(scope.row.closed)}}</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="200" fixed='right'>
					<template #default="scope">
						<el-button  size="mini" @click="frozen(scope.row.id)">冻结账号</el-button>
						<el-button type="success" size="mini" @click="thaw(scope.row.id)">解冻账号</el-button>
					</template>
				</el-table-column>
		</el-table>
		<el-pagination 
		background
		:page-size="num"
		:total="total"
		v-model:currentPage="page"
		layout="prev, pager, next"
		:hide-on-single-page="true"
		>
		</el-pagination>
	</div>
</template>

<script>
	import { UserFilled } from '@element-plus/icons-vue'
	import { ElMessage } from 'element-plus'
	import { defineComponent, reactive, toRefs } from 'vue'
	export default{
		name:'List',
		data(){
			return{
				userlist:[],//全部数据
				page:1,//当前页码
				total:0,//总页数
				num:8,//显示条数
				account:'',//账号
				password:'',//密码
				nickname:'',//昵称
				phone:'',//电话
				centerDialogVisible:false,
				radio1:"查看全部",
				flag:true
			}
		},
		components:{
			UserFilled
		},
		methods:{
			//请求数据
			SelectData(){
				this.flag=true
				this.axios.post('/api/adm/user/findAll','start=0&num=99999').then((res)=>{
					this.total = res.data.data.total
					this.userlist = res.data.data.users
				}).catch((error)=>{
					// console.log(error);
				})
			},
			//冻结账号
			frozen(id){
				this.axios.post('/api/adm/user/close/'+id).then((res)=>{
					if(res.data.code==200){
						ElMessage({ message:"已冻结该账号",type: "success"});
						this.SelectData()//冻结后刷新数据
					}
				}).catch((error)=>{
					//console.log(error);
				})
			},
			//解冻账号
			thaw(id){
				this.axios.post('/api/adm/user/resetPwd/'+id).then((res)=>{
					if(res.data.code==200){
						ElMessage({ message:"已解冻该账号，并重置密码",type: "success"});
						this.SelectData()//冻结后刷新数据
					}
				}).catch((error)=>{
					//console.log(error);
				})
			},
			//添加管理员
			getoffest(){
				if(!this.account || !this.password || !this.nickname || !this.phone){
					ElMessage({ message:"不能提交空数据",type: "error"});
					return false
				}
				this.centerDialogVisible = false
				let formdata = new FormData();
				formdata.append('account',this.account)
				formdata.append('password',this.password)
				formdata.append('nickname',this.nickname)
				formdata.append('phone',this.phone)
				this.axios.post('/api/adm/user/addAdm',formdata).then((res)=>{
					if(res.data.code==200){
						ElMessage({ message:"添加管理员成功",type: "success"});
						this.SelectData()//刷新数据
					}
				}).catch((error)=>{
					//console.log(error);
				})
			},
			//条件查询
			select(id){
				this.flag=false
				switch(id){
					// 恢复默认
					case 1:
						this.SelectData()//刷新数据
					break;
					// 查询用户
					case 2:
						this.axios.post('/api/adm/user/findAll','start=0&num=99999').then((res)=>{
							this.userlist=[]
							for(let temp of res.data.data.users ){
								if(temp.role=="P"){
									this.userlist.push(temp)
									this.total = this.userlist.length
								}
							}
						})
					break;
					// 查询管理员
					case 3:
						this.axios.post('/api/adm/user/findAll','start=0&num=99999').then((res)=>{
							this.userlist=[]
							for(let temp of res.data.data.users ){
								if(temp.role=="G"){
									this.userlist.push(temp)
									this.total = this.userlist.length
								}
							}
						})
					break;
					// 查询已冻结
					case 4:
						this.axios.post('/api/adm/user/findAll','start=0&num=99999').then((res)=>{
							console.log(res);
							this.userlist=[]
							for(let temp of res.data.data.users ){
								if(temp.closed==1){
									this.userlist.push(temp)
									this.total = this.userlist.length
								}
							}
						})
					break;
					// 查询已激活
					case 5:
						this.axios.post('/api/adm/user/findAll','start=0&num=99999').then((res)=>{
							this.userlist=[]
							for(let temp of res.data.data.users ){
								if(temp.closed==0){
									this.userlist.push(temp)
									this.total = this.userlist.length
								}
							}
						})
					break;
				}
			}
		},
		created() {
			this.SelectData()
		},
		watch:{
			page(){
				if(this.flag){
					this.SelectData()
				}else{
					console.log(1);
					this.select()
				}
			}
		},
		computed:{
			// 过滤数据
			filterClosed(){
				return (x)=>{
					return x==0?'已激活':'已冻结'
				}
			}
		}
	}
</script>

<style scoped>
	.list-bottom{
		margin: 5px 0;
		border-bottom: 2px solid #7f7f7f;
	}
	.el-col{
		font-size: 20px;
		font-weight: bold;
		line-height: 40px;
	}
	:deep(.el-table__cell img){
		width: 60px;
		height: 40px;
	}
	.el-input-group{
		margin: 10px 0 0 0;
	}
</style>
